<template>
  <div>
    <div>
      <el-dialog
        title="裁剪"
        :visible.sync="dialogcutShip"
        width="35%"
        :before-close="handleClose"
      >
        <div id="player" class="player"></div>
        <div class="mt16">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待删片段" name="first">
              <div class="flex_bt">
                <div class="flex1">
                  <div class="mg10">
                    <span>开始时间</span>
                    <span class="flex_start">
                      <input class="jsq_input" v-model="input1" type="number" />
                      <span class="jsq_mh">:</span>
                      <input class="jsq_input" v-model="input2" type="number" />
                      <span class="jsq_mh">:</span>
                      <input class="jsq_input" v-model="input3" type="number" />
                    </span>
                    <el-button type="primary" @click="getVideodata(1)"
                      >获取</el-button
                    >
                  </div>
                  <div class="mg10">
                    <span>结束时间</span>
                    <span class="flex_start">
                      <input class="jsq_input" v-model="input4" type="number" />
                      <span class="jsq_mh">:</span>
                      <input class="jsq_input" v-model="input5" type="number" />
                      <span class="jsq_mh">:</span>
                      <input class="jsq_input" v-model="input6" type="number" />
                    </span>
                    <el-button
                      type="primary"
                      id="currentTime"
                      @click="getVideodata(2)"
                      >获取</el-button
                    >
                  </div>
                  <div class="mt16">
                    <el-button type="danger" @click="deleteTime()"
                      >删除</el-button
                    >
                  </div>
                </div>
                <div class="flex1">
                  <div class="flex_start_start">
                    <span>视频名称：</span>
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      show-word-limit
                      class="width230"
                      v-model="deltitle"
                    >
                    </el-input>
                  </div>
                  <div class="btn_css">
                    <el-button type="primary" @click="save()">保存</el-button>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已删除片段" name="second">
              <div class="flex_start_time" v-if="deleteArr.length > 0">
                <div
                  class="time_child"
                  v-for="(item, index) in deleteArr"
                  :key="item.start + '删除片段'"
                >
                  <div class="flex_bt1 lh22">
                    <span>片段{{ index + 1 }}</span>
                    <el-button type="primary" @click="resume(index)">恢复</el-button>
                  </div>
                  <div class="lh22 mt16">
                    开始时间：{{ item.startTime }}
                  </div>
                  <div class="lh22">
                    结束时间：{{ item.endTime }}
                  </div>
                </div>
              </div>
              <div v-else style="text-align: center; padding: 50px 0">
                暂无删除片段
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogPreview = false">取 消</el-button>
            <el-button type="primary" @click="dialogPreview = false"
              >确 定</el-button
            >
          </span> -->
      </el-dialog>
    </div>
  </div>
</template>
    
<script>
import { getMint } from "@/utils/commin.js";
import api from "@/api/index.js";
export default {
  name: "previewDialog",
  props:{
    getlistData:Object
  },
  data() {
    return {
      liveSdk: null,
      dialogcutShip: false,
      activeName: "first",
      deltitle: "",
      input1: "00",
      input2: "00",
      input3: "00",
      input4: "00",
      input5: "00",
      input6: "00",
      beginTime: null,
      endTime: null,
      deleteArr: [],
    };
  },
  created() {
    let script2 = document.createElement("script");
    script2.type = "text/javascript";
    script2.src =
      "https://s1.videocc.net/library/blueimp-md5/md5-2.18.0.min.js";
    let script3 = document.createElement("script");
    script3.type = "text/javascript";
    script3.src = "https://player.polyv.net/livesdk/polyv-live.min.js";
    document.body.appendChild(script2);
    document.body.appendChild(script3);
  },
  watch: {
    dialogcutShip(val) {
      if (val == true) {
        this.getVideo();
      }
      if (this.liveSdk) {
        this.liveSdk.destroy(true);
      }
    },
    getlistData(val){
      this.deltitle=val.fileName
    }
  },
  methods: {
    save(){
       if(this.deleteArr.length>0){
        let deleteArrtrue=this.deleteArr
        deleteArrtrue.forEach(item => {
          delete item.startTime
          delete item.endTime
        });
        deleteArrtrue= JSON.stringify(deleteArrtrue)
        let form={
          channelId:this.getlistData.channelId,
          fileId:this.getlistData.fileId,
          deleteTimeFrame:deleteArrtrue,
          fileName:this.getlistData.fileName,
        }
         api.video.clipVideo(form).then(res=>{
           this.$message({type:'success',message:res.data})
           this.dialogcutShip=false
         })
       }else{
        this.$message({type:'warning',message:'请选择时间段'})
       }
    },
    //恢复
    resume(val){
      this.deleteArr = this.deleteArr.filter((item,index) => index != val)
    }, 
    // 删除确认
    deleteTime() {
      if (this.beginTime > this.endTime) {
        this.$message({ type: "error", message: "开始时间不能大于结束时间！" });
      }else{
        let time = {
        start: Math.trunc(this.beginTime),
        end: Math.trunc(this.endTime),
        startTime:getMint(Math.trunc(this.beginTime)),
        endTime:getMint(Math.trunc(this.endTime))
      };
      this.deleteArr.push(time);
      this.$message({type:'success',message:'添加成功！'})
      }
   
    },
    handleClick(tab, event) {
    },
    handleClose() {
      this.dialogcutShip = false;
    },
    // 获取时间
    getVideodata(val) {
      if (val == 1) {
        this.beginTime = this.liveSdk.player.currentTime;
        var time1 = getMint(Math.trunc(this.beginTime));
        this.input1 = time1.split(":")[0];
        this.input2 = time1.split(":")[1];
        this.input3 = time1.split(":")[2];
      } else {
        this.endTime = this.liveSdk.player.currentTime;
        var time2 = getMint(Math.trunc(this.endTime));
        this.input4 = time2.split(":")[0];
        this.input5 = time2.split(":")[1];
        this.input6 = time2.split(":")[2];
      }
    },
    // 视频初始化
   async getVideo() {
      this.liveSdk = null;
      //注意事项：appSecret，appId不建议在前端显示，不安全，请您一定要请求后端接口获取sign
      //参数开始
      var appSecret = "cfaea33980f341f993b0de9a164e8b7b";
      var appId = "fmro8dyh3d";
      var channelId = this.getlistData.channelId;
      //参数结束
      var userId =
        new Date().getTime().toString() +
        (10000 + parseInt(Math.random() * 90000));
      var userName = "测试-" + userId;
      var userPic =
        "https://livestatic.videocc.net/assets/wimages/missing_face.png";
      var params = {
        appId: appId,
        channelId: channelId,
        timestamp: new Date().getTime(),
      };

      var sign =await this.getSign(params,appSecret);
      // 第三步：创建SDK实例
      this.$nextTick(() => {
        this.liveSdk = new PolyvLiveSdk({
          channelId: channelId,
          sign: sign, // 频道验证签名
          timestamp: params.timestamp, // 毫秒级时间戳
          appId: appId, // polyv 后台的appId
          user: {
            userId: userId,
            userName: userName,
            pic: userPic,
          },
        });
        // 第四步：监听频道信息读取完成事件，初始化播放器
        this.liveSdk.on(
          PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT,
          async (event, data) => {
            this.liveSdk.setupPlayer({
              pptEl: "#ppt",
              el: "#player",
              autoplay: true,
              type: "vod",
              fileId: this.getlistData.fileId,
              url: this.getlistData.url,
              sessionId: this.getlistData.originSessionId,
            });
            this.liveSdk.on("loadedmetadata", function () {
            });
          }
        );
      });
    },

   async getSign(params,appSecret) {
      var paramsStr = "";
      for (let key in params) {
        paramsStr += key + "" + params[key];
      }

      var finalStr = appSecret + paramsStr + appSecret;
      return md5(finalStr).toUpperCase();
    },
  },
};
</script>
    
    <style lang="scss" scoped>
@import "@/assets/scss/utils/mixmin.scss";
.ppt,
.player {
  width: 100%;
  height: 360px;
}

.btn-wrap {
  margin-top: 15px;
}
.mg10 {
  margin: 10px 0;
}
.btn_css {
  text-align: right;
  margin-top: 45px;
}
.flex_start_time {
  @include flex(row, flex-start, flex-start);
  padding: $p16;
  margin-top: $m16;
  margin-bottom: $m16;
  .time_child {
    width: 150px;
    margin-right: 10px;
    .lh22 {
      line-height: 22px;
    }
    .mt16 {
      margin-top: $m16;
    }
  }
}
.flex_start_start {
  @include flex(row, flex-start, flex-end);
  margin-top: 12px;
}
.flex_bt {
  @include flex(row, space-between, flex-start);
}
.flex_bt1 {
  @include flex(row, center, space-between);
}
.flex_start {
  @include flex(row, flex-start, center);
  display: inline-block;
  margin: 0 10px;
  padding: 0 15px;
  border: 1px solid #dadada;
  height: 36px;
  width: 125px;
  line-height: 36px;
  vertical-align: middle;
  border-radius: 5px;
  .jsq_input {
    display: inline-block;
    width: 30px;
    border: none;
    background: none;
    outline: none;
  }
  .jsq_input:focus {
    border: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .jsq_mh {
    display: inline-block;
    width: 10px;
    text-align: center;
  }
}
</style>